<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pretify Syntax Highlighter</title>
<!--
<link type="text/css" rel="stylesheet" href="http://www.gstatic.com/codesite/ph/5121560014714628542/css/ph_detail.css" />
-->

<!-- CSS background white 
<style>
.pt .str { color: #080;color:brown; }
.pt .kwd { color: #008; }
.pt .com { color: #800; }
.pt .typ { color: #606; }
.pt .lit { color: #066; }
.pt .pun { color: #660; }
.pt .pln { color: #000; }
.pt .tag { color: #008; }
.pt .atn { color: #606; }
.pnt .atv { color: #080; }
.pt .dec { color: #606; }

@media print {
  .pt .str { color: #060; color:#bb63cf;}
  .pt .kwd { color: #006; font-weight: bold; }
  .pt .com { color: #600; font-style: italic; }
  .pt .typ { color: #404; font-weight: bold; }
  .pt .lit { color: #044; }
  .pt .pun { color: #440; }
  .pt .pln { color: #000; }
  .pt .tag { color: #006; font-weight: bold; }
  .pt .atn { color: #404; }
  .pt .atv { color: #060; }
}
pre {
  padding:10px;
  margin:4px 0;
  border:1px solid #222;
  box-shadow:inset 0 0 2px #000;
  color:#333;
  background-color:#fff;
  font-size:13px;
  font-family:'MS Shell Dlg 2';
  overflow:hidden;
}
</style>
-->
<!--
<script src="http://www.gstatic.com/codesite/ph/5121560014714628542/js/prettify/prettify.js" type="text/javascript"></script>
-->
<!-- CSS background hitam -->

<style>
.num { color:#d1c79e; }
.esc { color:#9ab2c8; } .typ { color:#9ab2c8; } /* font-famlily */ 
.str { color:#d1c79e; }
.pps { color:#d1c79e; } .atn { color:#e6ac32; } /* rel, src, href, type, */
.slc { color:#67686b; } .atv { color:#e7c86b; }
.com { color:#67686b; color:#52b26b; } /* id - #color  */
.ppc { color:#77cf63; } .pun { color:#9aa; } /* {, ;,%,},=,- */
.opt { color:#e1e0e5; }
.lin { color:#ffff99; } .dec { color:#ffff99; }
.kwa { color:#62acce; } .tag { color:#62acce; } /* tag opening & close */
.kwb { color:#e6ac32; } .pln { color:#5160e5; color:#f1e0e5; color:#aaa;} /* property, elemen, teks */
.kwc { color:#cf8563; }
.kwd { color:#bb63cf; } /*property in tag style */
.lit{ color:#7390e5;} /* value angka */

@media print {
  .pt .str { color: #d1c79e;}
  .pt .kwd { color: #bb63cf; font-weight: bold; }
  .pt .com { color: #67686b; font-style: italic; }
  .pt .typ { color: #9ab2c8; font-weight: bold; }
  .pt .lit { color: #7390e5; }
  .pt .pun { color: #9aa; }
  .pt .pln { color: #f1e0e5; }
  .pt .tag { color: #62acce; font-weight: bold; }
  .pt .atn { color: #e6ac32; }
  .pt .atv { color: #e7c86b; }
}
pre.kode {
  padding:10px;
  margin:4px 0;
  border:1px solid #222;
  box-shadow:inset 0 0 10px #000;
  color:#DBC686 !important;
  background-color:#2a2b2f;
  font-size:13px;
  font-family:'MS Shell Dlg 2';
  overflow:hidden;
}
</style>



<!--
pretify.pack.js
-->

<script src="http://gubhugcss-javascript.googlecode.com/svn/data/syntax-highlighter/prettify/cantikSH.js" type="text/javascript"></script>
</head>

<body>

<pre class="kode">$("textarea").highlightTextarea({
    words: ["Donec tincidunt","vulputate"],
    color: "#99f",
    id: "demo-wrap"
});</pre>

<pre class="kode">$("textarea").highlightTextarea({
    words: ["Donec tincidunt","vulputate"],
    color: "#99f",
    id: "demo-wrap"
});</pre>

<pre class="kode">$("textarea").highlightTextarea({
    words: ["Donec tincidunt","vulputate"],
    color: "#99f",
    id: "demo-wrap"
});</pre>

<pre class="kode"> &lt;link rel=&quot;stylesheet&quot; href=&quot;http://codemirror.net/lib/codemirror.css&quot;&gt;
    &lt;script src=&quot;http://codemirror.net/lib/codemirror.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://codemirror.net/mode/xml/xml.js&quot;&gt;&lt;/script&gt;
     &lt;style type=&quot;text/css&quot;&gt;
      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
      .activeline {background: #e8f2ff !important;}
    &lt;/style&gt;</pre>

<pre class="kode"> &lt;link rel=&quot;stylesheet&quot; href=&quot;http://codemirror.net/lib/codemirror.css&quot;&gt;
    &lt;script src=&quot;http://codemirror.net/lib/codemirror.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;http://codemirror.net/mode/xml/xml.js&quot;&gt;&lt;/script&gt;
     &lt;style type=&quot;text/css&quot;&gt;
      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
      .activeline {background: #e8f2ff !important;}
    &lt;/style&gt;</pre>

<pre class="kode">textarea {
	display:inline-block;
	margin:0; <span class="comments">// contoh comment </span>
	width:98%;
	border:2px solid #aaa;
	background:#000;
	border-radius:6px;
	padding:10px 5px 5px 12px;
	font:normal 12px Verdana;
	line-height:20px;
	color:#eee;
	max-height:450px;
}
button {
	width:400px;
	text-align:right;
	float:right;
}
.button-input {
	display:inline-block;
	width:120px;
	margin:0 3px;
}
#header{
        background:red;
        margin:10px;
}
h1{
        font:bold 30px Arial;
}
.box{
        width:20em;
        border:2px solid #000;
}
</pre>


<pre class="kode" name="code">textarea {
	display:inline-block;
	margin:0;
	width:98%;
	border:2px solid #aaa;
	background:#000;
	border-radius:6px;
	padding:10px 5px 5px 12px;
	font:normal 12px Verdana;
	line-height:20px;
	color:#eee;
	max-height:450px;
}
.button {
	width:400px;
	text-align:right;
	float:right;
}
.button-input {
	display:inline-block;
	width:120px;
	margin:0 3px;
}





</pre>


 <script type="text/javascript">
 cantikSH();
 </script>

</body>
</html>  